<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>注册页面</title>
    <%--静态包含BASE标签CSS样式 JS文件--%>
    <%@ include file="/page/common/head.jsp"%>
    <script type="text/javascript">
        $(function () {
            $("#sub_btn").click(function () {
                //验证用户名
                var usernameText= $("#username").val();
                var usernamePatt=/^\w{5,12}$/;
                if(!usernamePatt.test(usernameText)){

                    $(".errorMessage").text("用户名不合法");
                    return false;
                }
                //验证密码
                var passwprdText= $("#password").val();
                var passwordPatt=/^\w{5,12}$/;
                if(!passwordPatt.test(passwprdText)){
                    $(".errorMessage").text("密码不合法");
                    return false;
                }

                //确认密码
                var repswText=$("#repwd").val();
                if(repswText!=passwprdText){
                    $(".errorMessage").text("两次输入密码不一致");

                    return false;
                }

                //邮箱验证
                var emailText=$("#email").val();
                var emaiPatt = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if(!emaiPatt.test(emailText)){
                    $(".errorMessage").text("邮箱格式不合法");
                    return false;
                }

                //验证码
                var codeText=$("#code").val();
                codeText=$.trim(codeText);
                if(codeText==null||codeText==""){
                    $(".errorMessage").text("验证码不能为空");
                    alert("sss")
                    return false;
                }
            });
        });
    </script>




</head>
<body>
<form class="layui-form" action="userServlet" method="post">
    <input type="hidden" name="action" value="regist">
    <div class="errorMsg">
        ${requestScope.msg}
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" >用户名称</label>
        <div class="layui-input-inline">
            <input type="text" name="username" id="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" value="${requestScope.username}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" id="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-inline">
            <input type="password" name="conform_password" id="repwd" required lay-verify="required" placeholder="确认密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电子邮件</label>
        <div class="layui-input-inline">
            <input type="email" name="email" id="email" required lay-verify="required" placeholder="请输入邮箱地址" autocomplete="off" class="layui-input" value="${requestScope.email}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">验证码</label>
        <div class="layui-input-inline">
            <input id="code" name="code" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="errorMessage"></div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo" id="sub_btn">注册</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="layui/layui.all.js"></script>

</body>
</html>